<template>
  <div class="tips-box" v-if="!this.$store.state.show">
	<span class="msg-bg"><span class="el-icon-message-solid" style="color: #FFF;"></span></span>免费用户{{this.$store.state.count}}次/月，<span style="color: #000FFF;" @click="vip">升级会员</span>后可以无限次数查询！
  </div>
</template>

<script>
  export default{
    data() {
      return{
		show:false,
		count:0,
      }
    },
	created() {
		let info=JSON.parse(sessionStorage.getItem('info'))
		let key=localStorage.getItem('key')
		if(key){
			if(info && info.vipEndTime > new Date()){
				this.show=false
			}else{
				this.show=true
				this.getVipCount()
			}
		}else{
			this.show=true
			this.$store.commit('count',5)
		}
		
	},
    methods:{
		getVipCount(){
			this.$ajax.get('vipOrder/monthCount').then(res=>{
				this.count=res.data.data
				this.$store.commit('count',res.data.data)
			})
		},
		vip(){
			let key=localStorage.getItem('key')
			if(key){
				this.$router.push({
					path:'/vip_pay'
				})
			}else{
				this.$confirm('您还没有登录，请先去登录在升级会员', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					// 保存本地信息
					this.$router.push({
						path: "/userlogin",
						query: {
							vip_path: '/vip_pay'
						}
					})
				})
				return;
			}
		}
    }
  }
</script>

<style lang="scss" scoped>
	@media screen and (max-width:450px) {
		.tips-box{
			padding: 0 5px!important;
		}
	}
	.tips-box{
		width: 100%;
		height: 35px;
		line-height: 35px;
		background: #F4F0CD;
		color: #888;
		margin-bottom: 20px;
		border-radius: 5px;
		font-size: 14px;
		padding: 0 15px;
	}
	.tips-box span{
		cursor: pointer;
	}
	.msg-bg{
		display: inline-flex;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background-color: #DBBE4A;
		margin-right: 5px;
		align-items: center;
		justify-content: center;
	}
</style>
